<template>
  <!-- 查：
       1：定义api
       2:导入api
       3:进入页面调用api
       4:存储数据并渲染
       5：与分页建立关联
          1：页码双向绑定（.sync）
          2：页容量双向绑定（.sync）
          3:总数(total绑定)
          4：页容量选项值处理好（注意点：容量量的值要在选项中存在）
          5：页码改变与页容量改变都需要重新发请求

     持久化
       1：值改变了存储到浏览器
       2：初始值读取浏览器存储

       增
        1：创建一个新增弹框组件
        2：导入注册使用（点击新增打开弹框）
        3：完成布局
        4：完成表单验证
        5：定义新增api
        6:导入新增api
        7:点击新增在表单验证通过后调用api
        8:调用成功
          a:提示
          b:关闭弹框
          c:清空表单数据与验证
          d:刷新父级列表数据

      删
       1：点击删除弹出确定框
       2：定义删除api
       3:导入删除api
       4:确定框点击了确定调用删除api
       5:删除成功
          a:提示
          b:刷新列表
            （页码>1 && 当前页只有一条数据，需要页码--再刷新）

       excel导出
        1：导入excel导出方法，点击按钮时调用
        2：拿到所有员工列表数据
        3：将数据转换成相应数据类型进行导出

      生成二维码
        1：创建一个二维码弹框组件
        2：导入注册使用（点击头像打开弹框）
        3:打开同时生成二维码
            弹框中要有canvas
            绑定ref
            定义好生成二维码方法
            打开弹框时调用该方法

     没有新增弹框的修改（不复用新增弹框）
     1：创建弹框组件
     2：导入注册使用（点击修改打开弹框）
     3：完成布局
     4：获取数据存储数据
        a:点击项包含需要显示数据（深拷贝）
        b：点击项不包含需要显示数据（调用接口）
           定义导入与调用
     5：回显
        a:点击项包含需要显示数据（深拷贝）
        b：点击项不包含需要显示数据（调用接口）
           定义导入与调用
     6：如果有表单验证就完成表单验证
     7：定义编辑api
     8:导入编辑api
     9:点击确定调用api
     10:调用成功
        a:提示
        b:清空数据
        c:关闭弹框
        d:刷新列表（看父级有没有展示该数据）

 -->

  <div class="employees">
    <el-card class="top-card">
      <div class="top">
        <div class="left">
          <i class="el-icon-info" />
          <span>共{{ total }}条记录</span>
        </div>
        <div class="right">
          <el-button size="small" type="danger" @click="exportExcel">简单表头导出</el-button>
          <el-button size="small" type="info">复杂表头导出</el-button>
          <!-- 1:创建一个导入的路由组件  2：配制路由  3：点击跳转 -->
          <el-button size="small" type="success" @click="$router.push('/employees/import')">excel导入</el-button>
          <!-- 1:加到vue原型
               2：全局自定义指令
               3：如果是插值语法与v-bind可以用全局过滤器
               4：mixins:全局混入

           -->
          <!-- <el-button v-if="$store.state.user.userInfo.roles.points.includes('employees_del_btn')" size="small" type="primary" @click="addEvent">新增员工</el-button> -->
          <el-button v-if="showButton('employees_del_btn')" size="small" type="primary" @click="addEvent">新增员工</el-button>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-table :data="list">
        <el-table-column label="序号" width="60">
          <template #default="{$index}">
            {{ (page.page-1)*page.size+$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" sortable width="80" />
        <el-table-column prop="staffPhoto" label="头像" width="60">
          <template #default="{row}">
            <img v-imgerror class="avatar" :src="row.staffPhoto" alt="" @click="imgClick(row.staffPhoto)">
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" sortable width="110" />
        <el-table-column prop="workNumber" label="工号" sortable />
        <el-table-column prop="formOfEmployment" label="聘用形式" sortable>
          <template #default="{row}">
            <div v-changeemployeesdata:hireType="row.formOfEmployment" />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="formOfEmployment" label="聘用形式" sortable :formatter="formatterEmployment" /> -->
        <el-table-column prop="departmentName" label="部门" sortable />
        <el-table-column prop="timeOfEntry" label="入职时间" sortable />
        <!-- <el-table-column prop="enableState" label="帐户状态" sortable :formatter="formatterState" /> -->
        <!-- 过滤器：filters -->
        <!-- <el-table-column prop="enableState" label="帐户状态" sortable>
          <template #default="{row}">
            <div>
              {{ row.enableState | formatEnableState }}
            </div>
          </template>
        </el-table-column> -->
        <!-- 自定义指令 -->
        <el-table-column prop="enableState" label="帐户状态" sortable>
          <template #default="{row}">
            <div v-changeemployeesdata:workingState="row.enableState" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template #default="{row}">
            <el-button type="text" @click="$router.push('/employees/detail/'+row.id)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="setRoleEvent(row.id)">角色</el-button>
            <el-button type="text" @click="delEvent(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <!--
        current-page:默认页码，一般要加.sync形成双向绑定
        page-size:默认页容量，一般要加.sync形成双向绑定
        page-sizes：页容量选项
        layout:一般不去动
        total:总数
        @current-change：页码改变的事件（一般页码改变都需要重新请求列表）
        @size-change：页容量改变的事件（一般页码改变都需要重新请求列表）
        与接口关联
          1：页码双向绑定（.sync）
          2：页容量双向绑定（.sync）
          3:总数(total绑定)
          4：页容量选项值处理好（注意点：容量量的值要在选项中存在）
          5：页码改变与页容量改变都需要重新发请求
       -->

        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1,5,10,50,100, 200, 300, 400]"
          :page-size.sync="page.size"
          layout=" total,sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="getData"
        />
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 二维码弹框 -->
    <CreateCode ref="code" />
    <!-- 分配角色弹框 -->
    <SetRole ref="role" />
    <!-- <set-role /> -->
  </div>
</template>
<script>
import { sysUser, sysUserDelete } from '@/api/employees'
import employeesData from '@/api/constant/employees'
import { changeToValue } from '@/utils/index'
import jsCookie from 'js-cookie'
import Add from './components/Add.vue'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import CreateCode from './components/CreateCode.vue'
import SetRole from './components/SetRole.vue'
export default {
  components: {
    Add,
    CreateCode,
    SetRole
    // 'set-role': SetRole
  },
  filters: {
    formatEnableState(num) {
      return changeToValue(employeesData.workingState, num)
    }
  },
  data() {
    return {
      list: [],
      page: {
        page: 1, //	是	1	页码
        size: +jsCookie.get('employees_size') || 10 //	是	10	每页条数
      },
      total: 100
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysUser(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      // console.log('员工列表', res)
    },
    // 聘用形式转换
    formatterEmployment(row, column, cellValue, index) {
      return changeToValue(employeesData.hireType, cellValue)
    },
    // 状态转换
    formatterState(row, column, cellValue, index) {
      return changeToValue(employeesData.workingState, cellValue)
    },
    // 页容量改变
    sizeChange() {
      this.getData()
      // 存储当前页容量到浏览器
      jsCookie.set('employees_size', this.page.size)
    },
    // 新增事件
    addEvent() {
      // 打开弹框
      this.$refs.add.isShow = true
    },
    // 删除事件
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗?')
      await sysUserDelete(id)
      this.$message.success('删除成功')
      if (this.page.page > 1 && this.list.length === 1) {
        this.page.page--
      }
      this.getData()
    },
    // excel导出
    async  exportExcel() {
      // 获取所有员工数据
      const res = await sysUser({
        page: 1,
        size: 999999999
      })
      // 转换数据成excel需要的格式
      const newArr = res.data.rows.map(item => {
        return [
          item.username,
          item.staffPhoto,
          item.mobile,
          item.workNumber,
          changeToValue(employeesData.hireType, item.formOfEmployment),
          item.departmentName,
          item.timeOfEntry,
          changeToValue(employeesData.workingState, item.enableState)]
      })
      // 调用导出excel方法
      export_json_to_excel({
        filename: '员工列表',
        header: ['姓名', '头像', '手机号', '工号', '聘用形式', '部门', '入职时间', '帐户状态'],
        data: newArr
      })
      console.log('所有员工', res)
    },
    // 头像点击
    async  imgClick(imgsrc) {
      if (imgsrc) {
        // 打开弹框
        this.$refs.code.isShow = true
        await this.$nextTick()
        this.$refs.code.createImgCode(imgsrc)
      } else {
        this.$message.error('该头像地址不存在')
      }
    },
    // 分配角色点击事件
    setRoleEvent(id) {
      // 打开弹框
      this.$refs.role.isShow = true
      // 调用弹框接口获取列表
      this.$refs.role.getData()
      // 获取员工详情(包含角色id)
      this.$refs.role.getUserInfo(id)
    }
  }
}
</script>
<style lang='scss' scoped>
.employees{
  padding:20px;
  .top-card{
    margin-bottom: 15px;;
  }
}
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left{
    border:1px solid #91d5ff;
    padding:8px;
    background-color: #e6f7ff;
    border-radius: 6px;
    .el-icon-info{
      color:#409eff;
      margin-right:6px;
    }

  }
}
.page{
  padding-top:20px;
  text-align: center;
}
.avatar{
  width: 40px;
  height: 40px;
  object-fit: contain;
}
</style>
